<template>
  <div class="article">
    <h2 class="title">{{article.title}}</h2>
    <div class="desc">{{article.desc}}</div>
    <div class="content">
      <div
        class="box"
        v-for="(com,index) in article.content"
        :key="index"
      >
        <div class="com-title">{{com.title}}</div>
        <component
          :is="com.type"
          :data="com.data"
          :index="index"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import List from './components/List';
  import Grid from './components/Panel';
  import Histogram from './components/Histogram';
  import LineChart from './components/LineChart';
  import Description from './components/Description';
  import Pie from './components/Pie';

  export default {
    name: 'index',
    components: {
      List,
      Grid,
      Histogram,
      LineChart,
      Description,
      Pie
    },
    mounted() {
      this.init();
    },
    data() {
      return {
        article: {
          content: []
        }
      };
    },
    methods: {
      async init() {
        this.article = await this.$request('/article/query', {
          id: this.$route.query.id
        });
        console.log(this.article);
      }
    }
  };
</script>

<style scoped lang="less">
  .article {
    padding: 12px;

    .content {
      padding-top: 24px;
    }

    .title {
      font-weight: 500;
      font-size: 22px;
    }

    .com-title {
      font-size: 18px;
      font-weight: 400;
      margin-bottom: 8px;
    }

    .box {
      margin-bottom: 12px;
    }
  }
</style>
